import React,{useState} from "react";
//uuid、nanoid 生成唯一id的库
import { v4 as uuidv4 } from "uuid";
import Headers from "../Header/Header";
import List from '../List/List'
import Footer from '../Footer/Footer'
function ToDoList() {
  let state ={
    todos:[]
  }
  // 父级中写添加子项的函数，作为参数传给Header
 let addTodo =(data)=>{
    const todos= state.todos;
    todos.push({id:uuidv4(),todo:data,done:false})//标识，事件名称，事件完成状态
    // 将改变后的todolist重新设置
    this.setState({
      todos
    })
  }
  // 改变状态
 let changeTodoDone = (todoId)=>{
    const todos = state.todos;
    todos.forEach(item=>{
      if(item.id == todoId){
        item.done = ! item.done;
      }
    });
    this.setState({todos})
  }
  // 删除子项
 let deleteTodo = (todoId)=>{
    const todos = state.todos;
    for(let i=0;i<todos.length;i++){
      if(todos[i].id ==todoId){
        todos.splice(i,1);
        break;
      }
    }
    this.setState({todos})
  }
  // 清空所有已选项目
 let clearDones =()=>{
    const todos = state.todos;
    for(let i=0;i<todos.length;i++){
      if(todos[i].done ==true){
        todos.splice(i,1);
        i--;
        continue;
      }
    }
    this.setState({todos})
  }
  // 清空所有
 let clearAll = ()=>{
    this.setState({todos:[]});
  }
  return (
    <div className="img">
      <Headers addTodo={addTodo}></Headers>
      <List
          todos={state.todos}
          changeTodoDone={changeTodoDone}
          deleteTodo={deleteTodo}
        ></List>
        <Footer
          todos={state.todos}
          clearDones={clearDones}
          clearAll={clearAll}
        ></Footer>
    </div>
  );
}
export default ToDoList;
